<template>
    <div style="font-size: 10px">
        <div class="xlclass">
            这是样式xlclass
            <div class="xlchildren">
                这是childen样式
            </div>
            <div>
                <div class="xlchildren">孙子</div>
            </div>
            <input class="upper" v-model="msg" type="text"/>
            {{msg}}
            <h2>中国四大城市,去掉小黑点</h2>
            <ul class="myul">
                <li>北京</li>
                <li>上海</li>
                <li>广州</li>
                <li>深圳</li>
            </ul>
            <div><h1>伪类选择器</h1>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a class="ahref" href="http://www.baidu.com">百度</a>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a name="attr" href="http://www.hao123.com">hao123</a>
            </div>
            <button @click="changeColour">转换样式</button>
            <div :class="className">
                这是外层div
                <div>这是内层div</div>
            </div>
            <div class="xlpadding">
                这是padding属性
            </div>
            <div>
                <div class="xlmargin-bot">
                    margin1
                </div>
                <div class="xlmargin-top">
                    margin2
                </div>
            </div>
            <div class="mydiv">
                <div class="mycalc">mycalc</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "xlcss",
        data() {
            return {
                className: 'xlred',
                msg: null};
        },
        methods:{
            changeColour() {
                if (this.className === "xlred") {
                    this.className = 'xlgreen';
                }else{
                    this.className = 'xlred';
                }
            }
        }
    }
</script>

<style scoped>
    .xlred{
        color: red;
    }
    .xlgreen{
        color: green;
    }
    /*竖直会取较大那个*/
    .xlmargin-bot {
        margin-bottom: 20px;
        border: blue;
        background: red;
    }

    .xlmargin-top {
        background: blue;
        margin-top: 30px;
        border-bottom-color: red;
    }

    .xlpadding {
        padding: 10px 15px 20px 25px;
        border: red 10px solid;
    }

    /*继承属性*/
    .parentClass {
        color: red;
    }
    .ahref:hover,.ahref:link {
        color: red;
        text-decoration-line: none;
    }
    /*属性选择器*/
    [name*=attr]{
        color: aqua;
    }
    /*a {
        text-decoration-line: none;
    }*/
    .xlclass > .xlchildren {
    /*加粗*/
    font-weight: bold;
        color: red;
}
    .upper {
        text-transform: uppercase;
    }
    .myul{
        /*去除小黑点，加在ul上*/
        list-style-type: none;
        /*    图片*/
        list-style-image: url("https://icon.52112.com/assets/images/gzh-login.png");
    }
    .myul li{
    /*   居中对齐,line-height与height属性一样 */
        border:1px solid #ff0000;
        height: 45px;
        line-height: 45px;
    }

    .mycalc {
        height:calc(100% - 30%);
        width:calc(100% - 60%);
        border:solid green;
        margin-left: 30px;
    }

    .mydiv {
        height: 100px;
        width: 100px;
        border:solid red;
    }
</style>
